<template>
  <div>
    <a-card title="工单及变更数量趋势图" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
      <ve-histogram :data="sheetTrendData" :judge-width="true" :extend="chartExtend" :settings="chartSettings" height="270px"></ve-histogram>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'SheetTrend',
  components: {
  },
  data () {
    return {
      chartSettings: {
        showLine: ['变更']
      },
      chartExtend: {
        dataZoom: [
          {
            type: 'inside'// inside表示内置的鼠标缩放滑动
          }
        ],
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        }
      },
      sheetTrendData: {
        columns: ['时间', '工单', '变更'],
        rows: [
          { '日期': '1/1', '工单': 1393, '变更': 1093 },
          { '日期': '1/2', '工单': 3530, '变更': 3230 },
          { '日期': '1/3', '工单': 2923, '变更': 2623 },
          { '日期': '1/4', '工单': 1723, '变更': 1423 },
          { '日期': '1/5', '工单': 3792, '变更': 3492 },
          { '日期': '1/6', '工单': 4593, '变更': 4293 }
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    this.getSheetTrendData()
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * 工单及变更数量趋势图
     */
    getSheetTrendData () {
      // 生产当月的开始日期
      const startDate = new Date(moment(new Date()).format('YYYY-MM-DD 00:00:00')).getTime()
      const endDate = new Date(moment(new Date()).format('YYYY-MM-DD 23:59:59')).getTime()
      for (let i = 0; i < 400; i += 1) {
        this.sheetTrendData.rows.push({
          '时间': moment(this.randomDate(startDate, endDate)).format('YYYY-MM-DD HH:mm:ss'),
          '工单': Math.floor(Math.random() * 1000), // 输出0～1000之间的随机数
          '变更': Math.floor(Math.random() * 100) // 输出0～100之间的随机数
        })
      }
      this.sheetTrendData.rows.sort(function (a, b) {
        return Date.parse(a[ '时间' ]) - Date.parse(b[ '时间' ]) // 时间正序
      })
      this.sheetTrendData.rows.forEach((item) => {
        item['时间'] = moment(item['时间']).format('HH:mm:ss')
      })
    },
    /**
     * 生成指定时间段的随机时间
     */
    randomDate (startDate, endDate) {
      const date = new Date(+startDate + Math.random() * (endDate - startDate))
      const hour = 0 + Math.random() * (23 - 0) | 0
      const minute = 0 + Math.random() * (59 - 0) | 0
      const second = 0 + Math.random() * (59 - 0) | 0
      date.setHours(hour)
      date.setMinutes(minute)
      date.setSeconds(second)
      return date
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
</style>
